.process-designer-body {
  position: relative;
  display: flex;
  height: calc(100% - 60px);

  .ant-spin-nested-loading {
    width: 100%;
    height: 100%;

    &>div {
      .ant-spin-spinning {
        position: static;
      }
    }

    .ant-spin-container {
      width: 100%;
      height: 100%;

      .bpmn-container {
        width: 100%;
        // flex: 1;
        height: 100%;
        background-color: #fff;
        background-image: url('');
        opacity: 0;
        transition: .3s;

        .new-parent {
          background: unset !important;
        }

        &.noGrid {
          background-image: none;
        }

        .bjs-breadcrumbs {
          top: 60px;
          left: 60px;
        }

        // .djs-overlay-container{
        //   display: block!important;
        // }

        // .some-marker{
        //   .djs-outline{
        //     width: 30px;
        //     height: 30px;
        //     x: 0;
        //     y: 0;
        //     rx: 15px;
        //   }
        // }

        .element-created.djs-dragging {
          g.djs-visual {
            rect {
              &:nth-child(1) {
                x: 0
              }
            }
          }
        }

        .djs-element.djs-connection {

          // .djs-visual{
          //   path{
          //     marker-end: url("#sequenceflow-end-white-_999999-722qagdpc3hzrllrwvmm9ip55")!important;
          //     stroke: #999!important;
          //   }
          // }
          &.selected {
            .djs-outline {
              visibility: hidden;
            }

            // .djs-visual{
            //   path{
            //     stroke: var(--inbiz-color-primary)!important;
            //   }
            // }
          }
        }

        .djs-drag-group {
          g.djs-dragger {
            g.djs-visual {
              rect {
                display: none;

                &:nth-child(1) {
                  display: unset;
                }
              }

              circle {
                display: none;

                &:nth-child(1) {
                  display: unset;
                }
              }

              image {
                display: none;

                &:nth-child(1) {
                  display: unset;
                }
              }

              text {
                display: none;
              }
            }
          }
        }

        .layer-overlays {
          .djs-bendpoints.selected {
            .djs-bendpoint {
              display: none;
            }
          }
        }

        .startEvent-marker,
        .endEvent-marker {
          .djs-outline {
            width: 30px;
            height: 30px;
            x: 0;
            y: 0;
            r: 15px;
          }
        }

        .firstTask-marker {
          .djs-outline {
            width: 100px;
            height: 60px;
            x: 0;
            y: 0;
            rx: 9;
          }
        }

        .userTask-marker {
          &.element-created {
            g.djs-visual {
              rect {
                &:nth-child(1) {
                  x: 0
                }
              }
            }
          }

          .djs-outline {
            width: 100px;
            height: 60px;
            x: 0;
            y: 0;
            rx: 9;
          }

          // .djs-hit{
          //   height: 60px;
          // }
        }

        .gateway-marker {
          .djs-outline {
            visibility: hidden;
          }
        }

        .djs-shape.connect-ok {
          .djs-visual {
            &>:nth-child(1) {
              &.bpmnElementStartEventCustomElementType {
                fill: rgb(113, 183, 113) !important;
              }

              &.bpmnElementEndEventCustomElementType {
                fill: rgb(236, 112, 95) !important;
              }
            }
          }
        }

        .djs-overlay-context-pad {
          .djs-context-pad {
            left: -6px;
            top: 5px;
          }
        }

        .process-overlays-egg {
          user-select: none;
          pointer-events: none;
        }

        .djs-group.svg-hidden {
          display: none;
          user-select: none;
        }

        .djs-group.svg-label {
          rect {
            display: none;
            user-select: none;
          }
        }

        .layer-selectionOutline {
          display: none;
        }

        .djs-overlay {
          user-select: none;
          pointer-events: none;
        }

        .bjs-powered-by,
        .bjs-drilldown {
          display: none;
        }

        &.afterInit {
          opacity: 1;
        }
      }
    }
  }
}

.custom-bpmn .djs-connection .djs-visual {
  stroke: #1296db !important;
  stroke-width: 1px !important;
}

.djs-context-pad .bpmn-custom-palette-flow.entry {
  background: url('../assets/images/sequenceFlow.svg') center no-repeat;
  background-size: cover;
  cursor: pointer;
}

.djs-context-pad .bpmn-custom-palette-flow.entry:hover {
  background: url('../assets/images/sequenceFlowHover.svg') center no-repeat;
  background-size: cover;
}

// .djs-context-pad .entry:hover {
//   border: 1px solid #1890ff;
// }

.djs-context-pad .entry {
  box-sizing: border-box;
  background-size: 94%;
  box-shadow: none;
}